<template>
  <div class="body" style="background-color: rgb(255,255,255);">
    <div class="swiper">
      <div class="biaoti">
        <h1>外汇跨平台 跨系统 跟单引领者</h1>
        <h1>赋能科技交易，回归交易本身</h1>
        <p>
          除了拥有全智能跟随社区以外，还提供长期测评精选的行业顶尖交易员，复制跟随，达到相同收益率
        </p>
        <p class="button" style="width: 150px;height: 60px;border-radius: 35px;display: flex;
      align-items: center; justify-content: center;"><span @click="toPath('/SignalView')">立即订阅</span></p>
      </div>
      <el-carousel height="550px">
        <el-carousel-item v-for="(item, index) in banner" :key="item.id" style="overflow-x: hidden;">
          <img :src="item.image" class="image" style="width: 100%;">
        </el-carousel-item>
      </el-carousel>

    </div>
    <div class="shared" style="">
      <p style="color: #0487f9;font-size: 14px;">热门交易员</p>
      <h1 style="margin-top: 13px;font-size: 45px;line-height: 48px;">共享交易让机会触手可及</h1>
    </div>

    <div style="width: 100%; display: flex;">
      <div class="listbox" style="padding-left: 100px;padding-right: 100px;box-sizing: border-box;margin: 0 auto;">
        <div class="center">
          <div
            style="width: 390px;padding-left: 15px;padding-right: 15px; box-sizing: border-box;background-color: white;"
            v-for="(item, index) in startList" :key="item.id" @click="goToProductDetail(item.id)">
            <div class="box1" style="background-color: white;">
              <img :src="imageURLA" alt="" style="padding: 10px;background-color: white;" />
              <p class="p1" style="font-size: 25px; font-weight: bolder; margin-top: 20px">
                {{ item.nickname }}
              </p>
              <hr style="margin-top: 20px;border-color: rgba(0,0,0, 0.1);" />
              <p class="p2" style="color: #22d1a1; font-size: 27px;margin-top: 20px;">{{ item.all_transaction }}%</p>
              <p class="p3" style="margin-top: 10px;color: gray;">收益率</p>
              <div class="message" style="margin-top: 15px;color: gray; box-sizing: border-box;font-size: 14px;">
                <div class="m1" style="display: flex; justify-content: space-between;margin-bottom: 25px;">
                  <span>获利</span>
                  <span>{{ item.all_profit_loss }}</span>
                </div>
                <div class="m2" style="display: flex; justify-content: space-between;margin-bottom: 25px;">
                  <span>胜率</span>
                  <span>{{ item.winning }}%</span>
                </div>
                <div class="m3" style="display: flex; justify-content: space-between;margin-bottom: 10px;">
                  <span>最大回撤</span>
                  <span>{{ item.withdrawal }}%</span>
                </div>
              </div>
              <div class="level" style="display: flex; justify-content: space-between;overflow: hidden;margin-top: 30px;">
                <p style="margin-top: 20px;width: 60px;"><i style="color: #0487f9;">LEVEL{{ item.level }}</i> </p>
                <button
                  style=" height: 0;width:0;border-right: 100px solid #0487f9;border-bottom: 53px solid #0487f9;border-left: 30px solid transparent;color: white;background-color: transparent;">
                  <p
                    style="position: absolute; margin-top: 13px;margin-left: 10px;width: 125px;height: 53px; background-color: #0487f9;margin-top: 0px;">
                    <span style="line-height: 50px;overflow: hidden;" @click="toDetail(item.id)">立即订阅</span>
                  </p>
                </button>
              </div>
            </div>
          </div>

          <!--<div
            style="width: 390px;padding-left: 15px;padding-right: 15px; box-sizing: border-box;background-color: white;">
            <div class="box1" style="background-color: white;margin-bottom: 120px;">
              <img :src="imageURLB" alt="" style="padding: 10px;background-color: white;" />
              <p class="p1" style="font-size: 25px; font-weight: bolder; margin-top: 20px">
                康桥-欧美文件性策略
              </p>
              <hr style="margin-top: 20px;border-color: rgba(0,0,0, 0.1);" />
              <p class="p2" style="color: #22d1a1; font-size: 27px;margin-top: 20px;">106.76%</p>
              <p class="p3" style="margin-top: 10px;color: gray;">收益率</p>
              <div class="message" style="margin-top: 15px;color: gray; box-sizing: border-box;font-size: 14px;">
                <div class="m1" style="display: flex; justify-content: space-between;margin-bottom: 25px;">
                  <span>获利</span>
                  <span>4270.48</span>
                </div>
                <div class="m2" style="display: flex; justify-content: space-between;margin-bottom: 25px;">
                  <span>胜率</span>
                  <span>77.87%</span>
                </div>
                <div class="m3" style="display: flex; justify-content: space-between;margin-bottom: 10px;">
                  <span>最大回撤</span>
                  <span>1.93%</span>
                </div>
              </div>
              <div class="level" style="display: flex; justify-content: space-between;overflow: hidden;margin-top: 30px;">
                <p style="margin-top: 20px;width: 60px;"><i style="color: #0487f9;">LEVEL3</i> </p>
                <button
                  style=" height: 0;width:0;border-right: 100px solid #0487f9;border-bottom: 53px solid #0487f9;border-left: 30px solid transparent;color: white;background-color: transparent;">
                  <p
                    style="position: absolute; margin-top: 13px;margin-left: 10px;width: 125px;height: 53px; background-color: #0487f9;margin-top: 0px;">
                    <span style="line-height: 50px;overflow: hidden;">立即订阅</span> </p>
                </button>
              </div>
            </div>
          </div>
          <div
            style="width: 390px;padding-left: 15px;padding-right: 15px; box-sizing: border-box;background-color: white;">
            <div class="box1" style="background-color: white;margin-bottom: 120px;">
              <img :src="imageURLA" alt="" style="padding: 10px;background-color: white;" />
              <p class="p1" style="font-size: 25px; font-weight: bolder; margin-top: 20px">
                康桥-欧美文件性策略
              </p>
              <hr style="margin-top: 20px;border-color: rgba(0,0,0, 0.1);" />
              <p class="p2" style="color: #22d1a1; font-size: 27px;margin-top: 20px;">106.76%</p>
              <p class="p3" style="margin-top: 10px;color: gray;">收益率</p>
              <div class="message" style="margin-top: 15px;color: gray; box-sizing: border-box;font-size: 14px;">
                <div class="m1" style="display: flex; justify-content: space-between;margin-bottom: 25px;">
                  <span>获利</span>
                  <span>4270.48</span>
                </div>
                <div class="m2" style="display: flex; justify-content: space-between;margin-bottom: 25px;">
                  <span>胜率</span>
                  <span>77.87%</span>
                </div>
                <div class="m3" style="display: flex; justify-content: space-between;margin-bottom: 10px;">
                  <span>最大回撤</span>
                  <span>1.93%</span>
                </div>
              </div>
              <div class="level" style="display: flex; justify-content: space-between;overflow: hidden;margin-top: 30px;">
                <p style="margin-top: 20px;width: 60px;"><i style="color: #0487f9;">LEVEL3</i> </p>
                <button
                  style=" height: 0;width:0;border-right: 100px solid #0487f9;border-bottom: 53px solid #0487f9;border-left: 30px solid transparent;color: white;background-color: transparent;">
                  <p
                    style="position: absolute; margin-top: 13px;margin-left: 10px;width: 125px;height: 53px; background-color: #0487f9;margin-top: 0px;">
                    <span style="line-height: 50px;overflow: hidden;">立即订阅</span> </p>
                </button>
              </div>
            </div>
          </div> -->
        </div>

      </div>
    </div>

    <div style="width: 100%; display: flex;justify-content: center;">
      <div class="capture" style="display: flex;box-sizing: border-box;width: 1135px;">
        <div class="left">
          <div class="lefttop">
            <p style="color: #0487f9">量化智能跟单社区</p>
            <h1 style="margin-top: 12px;font-size: 45px">技术优势</h1>
            <p style="margin-top: 45px;color: gray;text-align: left;">领先的跟单技术和经过层层筛选的交易牛人，助力用户找到更合适的投资方式。</p>
          </div>
          <div class="leftbottom content" style="line-height: 1; margin-top: 60px;background-color: white;">
            <el-tabs v-model="activeName"  @tab-click="handleClick" style="background-color: white;" >
              <el-tab-pane :label="item.name" :name="item.id" v-for="(item, index) in helpType" :key="index">
                <el-collapse v-model="activeNames" @change="handleChange" height="600">
                <el-collapse-item :title="detail.title" v-for="(detail, detailIndex) in help" :key="detailIndex">
                  <div v-html="detail.content" style="color: gray;text-align: left;"></div>
                </el-collapse-item>
              </el-collapse>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="right" style="margin-left: 35px;width: 400px;height: 500px;margin-bottom: 50px;">
          <img src="@/assets/img/login-banner.png" alt="" style="width: 550px;height: 500px;" />
        </div>
      </div>
    </div>

    <div class="use">
      <div class="howtouse">
        <p style="color: #0487f9">怎样使用</p>
        <h1 style="margin-top: 15px;font-size: 45px;">我们为交易员提供了完整的解决方案</h1>
      </div>
      <div class="boxs" style="width: 1000px;margin: 0 auto;">
        <div class="box1">
          <div
            style="width: 160px;height: 160px; border-radius: 50%;padding: 15px;background-color: white;margin: 0 auto;">
            <i class="el-icon-user"></i>
          </div>
          <p class="p1">分享信号</p>
          <p class="p2">交易者加入社区，关联帐户并分享他们的交易策略</p>
        </div>
        <div class="line" style="width: 200px;height: 1px;background-color: gray;margin-top: 70px;"></div>
        <div class="box2">
          <div
            style="width: 160px;height: 160px; border-radius: 50%;padding: 15px;background-color: white;margin: 0 auto;">
            <i class="el-icon-trophy"></i>
          </div>
          <p class="p1">社区排名</p>
          <p class="p2">社区根据过往业绩、稳定性、行为和前景对交易者进行排名</p>
        </div>
        <div class="line" style="width: 200px;height: 1px;background-color: gray;margin-top: 70px;"></div>
        <div class="box3">
          <div
            style="width: 160px;height: 160px; border-radius: 50%;padding: 15px;background-color: white;margin: 0 auto;">
            <i class="el-icon-link"></i>
          </div>
          <p class="p1">复制跟随</p>
          <p class="p2">投资者根据其投资资本和风险偏好选择要复制的交易员</p>
        </div>
      </div>
    </div>
    <div class="chouse" style="">
      <div class="whyuse">
        <p class="p1" style="color: #0487f9;margin-top: 10px;">为何选择我们？</p>
        <h1 style="margin-top: 20px;font-size: 45px;">多样化的社区服务</h1>
      </div>
      <div class="situaction">
        <div style="width: 100%;display: flex;justify-content: center;margin-bottom: 20px;">
          <div class="box1">
            <img src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/portfolio/img1.jpg"
              alt="" />
            <p class="p1"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;text-align: left;margin-top: 20px;margin-bottom: 10px;">
              提供市场快讯、财经日历和行情图表等交易工具，帮助交易员快速了解市场行情。
            </p>
            <p class="p2"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;font-size: 20px;">交易工具</p>
          </div>
          <div class="box1">
            <img src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/portfolio/img2.jpg"
              alt="" />
            <p class="p1"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;text-align: left;margin-top: 20px;margin-bottom: 10px;">
              可实时查看账号的收益、净值、余额、最大回撤和跟随收益以及月分析报告等常见分析指标。
            </p>
            <p class="p2"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;font-size: 20px;">账户分析</p>
          </div>
          <div class="box1">
            <img src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/portfolio/img3.jpg"
              alt="" />
            <p class="p1"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;text-align: left;margin-top: 20px;margin-bottom: 10px;">
              社区用户可发表评论与交易员进行沟通交流，也可通过网友的评论来了解交易员
            </p>
            <p class="p2"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;font-size: 20px;">信号评论</p>
          </div>
        </div>
        <div style="width: 100%;display: flex;justify-content: center;margin-bottom: 100px;">
          <div class="box1">
            <img src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/portfolio/img4.jpg"
              alt="" />
            <p class="p1"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;text-align: left;margin-top: 20px;margin-bottom: 10px;">
              可实时查看账号正在持仓以及历史交易订单，真实数据不可篡改。
            </p>
            <p class="p2"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;font-size: 20px;">交易订单</p>
          </div>
          <div class="box1">
            <img src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/portfolio/img5.jpg"
              alt="" />
            <p class="p1"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;text-align: left;margin-top: 20px;margin-bottom: 10px;">
              一键复制，智能跟随。无需额外设置跟单比例，系统自动判断净值比例进行跟随。
            </p>
            <p class="p2"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;font-size: 20px;">智能跟随</p>
          </div>
          <div class="box1">
            <img src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/portfolio/img6.jpg"
              alt="" />
            <p class="p1"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;text-align: left;margin-top: 20px;margin-bottom: 10px;">
              实时更新外汇行业最新资讯以及交易相关的技术分析，重要行情不错过。
            </p>
            <p class="p2"
              style="padding: 0px 25px;box-sizing: border-box;font-size: 14px;line-height: 20px;font-size: 20px;">行情资讯</p>
          </div>
        </div>

      </div>
    </div>
    <!-- <hr style="margin-top: 50px; margin-bottom: 100px;color: rgba(154, 154, 168, 0.1);padding-left: 150px;padding-right: 150px;" /> -->

    <div class="number">
      <div class="box1">
        <div class="img"><i class="el-icon-edit-outline"></i></div>
        <div style="width: 250px;margin-left: 10px; display: flex;flex-direction: column;align-items: flex-start;">
          <h1 style="font-size: 45px;">{{ number.home_1 }}</h1>
          <p class="p1" >跟随获利</p>
          <p class="p2">Etiam facilisis ligula nec velita pos</p>
        </div>
      </div>
      <div class="box1">
        <div class="img"><i class="el-icon-s-ticket"></i></div>
        <div style="width: 250px;margin-left: 10px; display: flex;flex-direction: column;align-items: flex-start;">
          <h1 style="font-size: 45px;">{{ number.home_2 }}</h1>
          <p class="p1">交易手数</p>
          <p class="p2">Vestibulum commodo sapien non</p>
        </div>
      </div>

      <div class="box1">
        <div class="img"><i class="el-icon-edit-outline"></i></div>
        <div style="width: 250px;margin-left: 10px; display: flex;flex-direction: column;align-items: flex-start;">
          <h1 style="font-size: 45px;">{{ number.home_3 }}</h1>
          <p class="p1">累计订阅人数</p>
          <p class="p2">Etiam convallis elementum sapien</p>
        </div>
      </div>
    </div>
    <div class="user">
      <p style="color: white;margin-top: 50px;">看看用户怎么说</p>
      <h1 style="color: white;margin-top: 10px;font-size: 45px;">他们都选择我们</h1>
      <div class="container" style="width: 800px;height: 600px; margin: 0 auto; margin-top: 100px;">
        <el-carousel height="600px">
          <el-carousel-item v-for="(item, index) in playBanner" :key="item.id" style="">
            <div>
              <div style="width:130px ;height: 130px;border-radius: 50%;padding: 10px;margin: 0 auto;background-color: white;">
                <img :src="item.image" alt="" style="width: 110px;height: 110px;border-radius: 50%;">
              </div>
              <p class="p1" style="margin-top: 25px;font-size: 25px;color: white;">{{ item.name }}</p>
              <p class="p2" style="margin-top: 10px;color: white;">{{ item.label }}</p>
              <p class="p3" style="margin-top: 30px;color: white;line-height: 25px;">{{ item.content }}</p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="player">
      <p style="color: #0487f9;">我的合作伙伴</p>
      <h1 style="margin-top: 10px;font-size: 45px;">值得信赖的合作伙伴</h1>
      <div class="icon"
        style="width: 100%;height: 300px;display: flex;justify-content: center; padding-top: 80px;padding-left: 200px;padding-right: 200px;box-sizing: border-box;overflow: hidden;flex-wrap: wrap;">
        <div style="width: 100%;display: flex;justify-content: center;">
          <div class="img" style="width: 120px;height: 40px;margin-right: 30px;overflow: hidden;">
            <img class="animated-image"
              src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/clients/client4.png" alt=""
              style="width: 100%;height: 100%;">
          </div>
          <div class="img" style="width: 120px;height: 40px;margin-right: 30px;overflow: hidden;">
            <img class="animated-image"
              src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/clients/client4.png" alt=""
              style="width: 100%;height: 100%;">
          </div>
          <div class="img" style="width: 120px;height: 40px;margin-right: 30px;overflow: hidden;">
            <img class="animated-image"
              src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/clients/client4.png" alt=""
              style="width: 100%;height: 100%;">
          </div>
          <div class="img" style="width: 120px;height: 40px;margin-right: 30px;overflow: hidden;">
            <img class="animated-image"
              src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/clients/client4.png" alt=""
              style="width: 100%;height: 100%;">
          </div>
          <div class="img" style="width: 120px;height: 40px;margin-right: 30px;overflow: hidden;">
            <img class="animated-image"
              src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/clients/client4.png" alt=""
              style="width: 100%;height: 100%;">
          </div>
          <div class="img" style="width: 120px;height: 40px;margin-right: 30px;overflow: hidden;">
            <img class="animated-image"
              src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/clients/client4.png" alt=""
              style="width: 100%;height: 100%;">
          </div>
        </div>
        <div style="width: 100%;display: flex;justify-content: center;">
          <div class="img" style="width: 120px;height: 40px;margin-right: 30px;overflow: hidden;">
            <img class="animated-image"
              src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/clients/client4.png" alt=""
              style="width: 100%;height: 100%;">
          </div>
          <div class="img" style="width: 120px;height: 40px;margin-right: 30px;overflow: hidden;">
            <img class="animated-image"
              src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/clients/client4.png" alt=""
              style="width: 100%;height: 100%;">
          </div>
          <div class="img" style="width: 120px;height: 40px;margin-right: 30px;overflow: hidden;">
            <img class="animated-image"
              src="https://wulai.oss-cn-chengdu.aliyuncs.com/common/home/dexon/assets/images/clients/client4.png" alt=""
              style="width: 100%;height: 100%;">
          </div>
        </div>
      </div>
    </div>

    <div class="foottitle">
      <div style="text-align: left;width: 600px;height:300px ;">
        <p style="color: white;margin-bottom: 10px;">准备好了吗？</p>
        <h1 style="color: white;font-size: 45px;">赋能科技交易，回归交易本身</h1>
      </div>
      <el-button type="info" plain
        style="margin-top: 20px;width: 140px;color: black; border-radius: 30px;padding-left: 30px;padding-right: 30px;padding-top: 20px;padding-bottom: 20px;" @click="toPath('/SignalView')">我要跟单</el-button>
    </div>
    <div class="footclink"></div>
  </div>
</template>

<script>
import { starListApi, bannerApi, numberApi, playBannerApi } from '@/api/index'
import { receiveBaseUrl } from '../../utils/config'
import { helpTypeApi, helpApi } from '@/api/index'

export default {
  name: 'BoxView',
  data() {
    return {
      startList: [],  //明星列表数据
      //在这里定义要渲染数据
      maxBack: '最大回撤',  //在return区域存储请求过来的数据，然后在模板里渲染这里的变量即可
      banner: [],
      number: [],
      playBanner: [],

      imageURLA: 'https://fxhot.oss-cn-zhangjiakou.aliyuncs.com/jeecgossbizPath/mmexport1667117043034_1677744831036.png',
      imageURLB: 'https://fxhot.oss-cn-zhangjiakou.aliyuncs.com/jeecgossbizPath/1668068918777.png_1677723758227.jpg',
      imgWidth: 0,
      imgLength: 0,
      currentIndex: 1,
      //三张表定义三个数组存储，
      /*  imageBox: [
         { id: 0, img: 'https://followork.oss-cn-zhangjiakou.aliyuncs.com/saas/fenxingzhe/img/web-home-banner-1.png' },
         { id: 1, img: 'https://followork.oss-cn-zhangjiakou.aliyuncs.com/saas/fenxingzhe/img/web-home-banner-2.png' },
         { id: 2, img: 'https://followork.oss-cn-zhangjiakou.aliyuncs.com/saas/fenxingzhe/img/web-home-banner-3.png' }
       ], */
      /*  imageBox1: [
         { id: 3, img: require('../../assets/img/8.png') },
         { id: 4, img: require('../../assets/img/9.png') },
         { id: 5, img: require('../../assets/img/8.png') },
         { id: 6, img: require('../../assets/img/9.png') },
       ], */
      activeName: '',
      helpType: [],
      activeNames: ['1'],
      help: [],
      a: 1

    }
  },
  created() {
    this.getList()
    this.getBanner()
    this.getNumber()
    this.getplayBanner()
    this.gethelpType()
  },
  methods: {
    toPath(path) {
      this.$router.push(path);
    },
    //这里需要传参数，上面的方法就没办法传了 
    toDetail(id,e){
      this.$router.push({ name: 'detail', params: { id }});
    },
    handleClick(tab) {
      // 处理选项卡点击事件
      console.log('Clicked tab:', tab);
      this.gethelp(tab.name); // 获取对应选项卡的详情数据
    },
    handleChange() {
      // 处理详情信息的折叠状态变化
      console.log('Details changed:', this.activeNames);
    },
    test() {
      console.log(222)
    },

    gethelpType() {
      // 模拟从后端请求导航栏数据的接口调用
      helpTypeApi().then(res => {
        this.helpType = res.data.data;
        console.log(this.helpType);
        // 设置默认活动选项卡为第一个导航栏数据的 id
        if (this.helpType.length > 0) {
          this.activeName = this.helpType[0].id;
          this.gethelp(this.activeName); // 获取默认选项卡的详情数据
        }
      }).catch(error => {
        console.error('Failed to fetch help type:', error);
      });
    },
    gethelp(id) {
      // 模拟从后端请求详情数据的接口调用
      let data = {
        type_id: id // 使用传入的选项卡的 id 作为请求参数
      };
      helpApi(data).then(res => {
        this.help = res.data.data;
        console.log(this.help);
      }).catch(error => {
        console.error('Failed to fetch help:', error);
      });
    },

    goToProductDetail(id) {
      this.$router.push({
         path: `/detail` ,
         query:{id:id}
        });
    },
    //获取明星广场列表
    getList() {
      const params = {
        order: 0,
        page: 1,
        page_size: 3,
        level: 0,
        range: 0,
      }
      starListApi(params).then(res => {
        console.log(res)
        if (res.data.code == 1) {
          //这个data的层级真深
          this.startList = res.data.data.data
          console.log(this.startList)
        }
        // startList
      }).catch(err => {
        console.log(err)
      })
    },

    //获取banner
    getBanner() {
      const params = {
        type: 1
      }
      bannerApi(params).then(res => {
        console.log(res.data.data, '轮播图')
        this.banner = res.data.data
        /* if(res.data.code==1){
         this.banner=res.data.data
       } */
      })
    },

    //获取数据统计
    getNumber() {
      numberApi().then(res => {
        console.log(res.data.data, '>>>number')
        this.number = res.data.data
      })
    },

    //获取playBanner
    getplayBanner() {
      playBannerApi().then(res => {
        console.log(res.data.data, '合作伙伴轮播图')
        this.playBanner = res.data.data
      })
    }
  },
  computed: {
    activeDotIndex() {
      return this.currentIndex - 1
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes moveUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100px);
  }
}

.animated-image:hover {
  position: relative;
  animation: moveUp 1s infinite;
}

.swiper {
  width: 100%;
  // height: 500px;
  //background-color: antiquewhite;
  position: relative;
  overflow: hidden;
}

.capture {

  .left {
    width: 610px;
    height: 100%;
    // background-color: pink;

    .lefttop {
      width: 100%;
      height: 100px;
      // background-color: aqua;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .leftbottom {
      width: 100%;
      //height: 50px;
      //background-color: pink;
      padding-top: 25px;
      box-sizing: border-box;

    }

  }

  .right {
    width: 400px;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.use {
  margin-top: 100px;
  overflow: hidden;
  width: 100%;
  height: 690px;
  background-color: rgba($color: skyblue, $alpha: 0.1);
  padding-top: 20px;
  box-sizing: border-box;

  .howtouse {
    width: 100%;
    height: 100px;
    // background-color: pink;
    margin-top: 100px;
  }

  .boxs {
    padding-top: 60px;
    box-sizing: border-box;
    width: 100%;
    height: 400px;
    //background-color: chocolate;
    display: flex;
    justify-content: space-around;

    .p1 {
      font-size: 20px;
      font-weight: bolder;
      margin-top: 40px;
    }

    .p2 {
      margin-top: 20px;
      font-size: 14px;
      color: gray;
      width: 310px;
      margin-left: -40px;
      line-height: 20px;
    }

    img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      padding: 10px;
      background-color: white;
      margin: 0 auto;
    }

    i {
      width: 130px;
      height: 130px;
      font-size: 70px;
      padding-top: 25px;
      background-color: rgba($color: skyblue, $alpha: 0.1);
      color: #0487f9;
      font-weight: 500;
      border-radius: 50%;
    }

    i:hover {
      color: white;
      background-color: #0487f9;
    }

    .box1,
    .box2,
    .box3 {
      width: 250px;
      height: 100%;
      // background-color: pink;
    }
  }
}

.chouse {
  width: 100%;

  .whyuse {
    margin-top: 100px;
    width: 100%;
    height: 100px;
  }

  .situaction {
    width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    //background-color: skyblue;
    overflow: hidden;
    margin-bottom: 100px;
    border-bottom: 1px solid rgba($color: gray, $alpha: 0.3);

    img:hover {
      transform: scale(1.05);
    }

    .box1 {
      height: 320px;
      width: 360px;
      background-color: white;
      margin-bottom: 20px;
      margin-left: 15px;
      margin-right: 15px;
      border-radius: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 200px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
      }

      .p1 {
        float: left;
        color: gray;
      }

      .p2 {
        float: left;
        font-weight: bolder;
      }
    }

    .box1:hover {
      background-color: #0487f9;
      color: white;

      .p1 {
        color: white;
      }
    }
  }
}

.number {
  width: 1000px;
  height: 200px;
  margin: 0 auto;
  //background-color: rgba($color: skyblue, $alpha: 0.1);
  display: flex;
  justify-content: space-around;

  .box1 {
    width: 350px;
    height: 150px;
    // background-color: rgba($color: gray, $alpha: 0.5);
    border-radius: 20px;
    display: flex;

    .img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: white;
      box-sizing: border-box;

      i {
        width: 60px;
        height: 60px;
        background-color: rgba($color: skyblue, $alpha: 0.1);
        font-size: 30px;
        padding-top: 15px;
        color: #0487f9;
        border-radius: 50px;
      }

      i:hover {
        color: white;
        background-color: #0487f9;
      }
    }

    .p1 {
      margin-top: 10px;
    }

    .p2 {
      margin-top: 30px;
      font-size: 14px;
      color: gray;
    }
  }
}

.user {
  width: 100%;
  height: 900px;
  background-color: #072d50;
  padding-top: 50px;
  box-sizing: border-box;
}

.player {
  width: 100%;
  height: 500px;
  background-color: rgba($color: skyblue, $alpha: 0.1);
  padding-top: 100px;
  box-sizing: border-box;

  .icon {
    width: 600px;
    height: 200px;
    // background-color: cornsilk;
    margin: 0 auto;
    // background-color: white;

    img {
      //perspective: 1000px;
      /* 设置透视视角，用于 3D 效果 */
      transition: transform 1s;
      /* 添加过渡效果，使翻转平滑 */
      //background-color: white;
    }

    img:hover {
      transform: rotateX(360deg);
      /* 在鼠标滑过时进行翻转 */
      background-color: white;
    }
  }
}

.footclink {
  width: 100%;
  height: 200px;
  margin-bottom: -100px;
  background-color: #002748;
  position: relative;
}

.foottitle {
  width: 1150px;
  height: 280px;
  padding: 10px;
  background-color: #02213c;
  margin: 0 auto;
  margin-top: 200px;
  padding-top: 100px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  margin-bottom: -140px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

* {
  margin: 0;
  padding: 0;
}

.biaoti {
  width: 1000px;
  height: 270px;
  position: absolute;
  /*   margin-top: 250px;
  margin-left: 20%; */
  top: 250px;
  left: 50%;
  margin-left: -500px;
  //background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 100;
  color: white;

  .button {
    background-color: white;

    span {
      color: #0487f9;
    }
  }

  .button:hover {
    background-color: transparent;
    border: 1px solid white;

    span {
      color: white
    }
  }

  h1 {
    line-height: 55px;
    font-size: 47px;
  }

  p {
    margin-top: 45px;
    font-size: 14px;
  }
}

.shared {
  width: 100%;
  height: 100px;
  //background-color: pink;
  margin-top: 50px;
}

.listbox {
  width: 100%;
  margin-top: 50px;
  // background-color: pink;

  .center {
    width: 100%;
    display: flex;
    justify-content: center;
    // background-color: blue;
    margin: 0 auto;
  }

  .box1 {
    width: 360px;
    height: 410px;
    //border: 2px solid rgba($color: gray, $alpha: 0.1);
    border-radius: 5px;
    margin-top: 50px;
    margin-bottom: 120px;
    //margin-right: 30px;
    padding-left: 35px;
    padding-right: 35px;
    /* 新增的样式 */
    box-shadow: 0px 0px 10px rgba($color: skyblue, $alpha: 0.5);

    .p1:hover {
      color: #0487f9;
    }

    img {
      width: 120px;
      height: 120px;
      //background-color: pink;
      margin: 0 auto;
      border-radius: 50%;
      margin-top: -60px;
    }
  }
}


/* ::v-deep .el-tabs__nav-wrap::after {
  background-color: white !important;

} */


::v-deep .el-collapse-item {
  font-size: 16px;
  // margin-top: -5px;
  //border-bottom: 1px solid rgba($color: gray, $alpha: 0.1);
  padding-left: 20px;
  text-align: center;
}

::v-deep .el-collapse-item__arrow {
  display: none;
}

::v-deep .el-collapse-item__header {
  position: relative;
}

::v-deep .el-collapse-item__header::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000;
  /* Replace #000 with your desired color */
  margin-right: 10px;
}

::v-deep .el-collapse-item.is-active .el-collapse-item__header::before {
  transform: translate(-50%) rotate(90deg);
}

::v-deep .el-tabs__header {
  width: 600px;
 // background-color: pink;
  font-size: 20px;
  border-bottom: 1px solid gray;
  margin-bottom: 0;
}

::v-deep .el-tabs__item {
  //background-color: skyblue;
  padding: 0;
  font-size: 16px;
  font-weight: 100;
  color: #333333;
  text-align: center;
  margin-right: 20px;
  width: 80px;
}


::v-deep .el-tabs__item.is-active {
  color: #333333;
  font-weight: bold;
  opacity: 1;
  border-bottom: 2px solid black;
}

::v-deep .el-tabs__item:hover {
  color: #333333;
  cursor: pointer;
  opacity: 1;
} 

</style>
